import React, { useEffect, useState } from 'react';
import client from '@/api/client';

import s from './style.module.less';
import AwardItem from '@/components/AwardItem';

export default function TurntableBox(props) {
  const borderClassNames = [
    [s.upperBorder, s.upDown].join(' '),
    [s.lowerBorder, s.upDown].join(' '),
    [s.leftBorder, s.leftRight].join(' '),
    [s.rightBorder, s.leftRight].join(' '),
  ];
  const borders = borderClassNames.map((border, index) => {
    return (
      <div className={border} key={index}>
        <div className={[s.dot, s.vertex].join(' ')}></div>
        <div className={[s.dot, s.border, s.leftBorderDot].join(' ')}></div>
        <div className={[s.dot, s.white].join(' ')}></div>
        <div className={[s.dot, s.border, s.rightBorderDot].join(' ')}></div>
        <div className={[s.dot, s.vertex].join(' ')}></div>
      </div>
    );
  });

  return (
    <div className={s.turntableBox}>
      {borders}
      <div className={s.blocks}>
        <div className={s.itemContainer}>
          {props.awards.map((item, index) => (
            <AwardItem
              key={index}
              type={item.type}
              award_name={item.award_name}
              award_image={item.award_image}
              onClick={props.draw}
              index={item.number}
              curIndex={props.curIndex}
            />
          ))}
        </div>
      </div>
    </div>
  );
}
